<template>
  <div class="bean-trans-wrap bg-color">
    <div class="trans-item">
      <van-cell-group class="trans-item-cells">
        <van-cell title="转让数量" :border="false">
          <div Slots="value">
            <span style="font-family: DingMedium; color: #ff6d24"
              >{{ this.ruleForm.dou_num }} 轶善豆</span
            >
          </div>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="trans-item-cells">
        <van-cell title="转让金额" :border="false">
          <div Slots="value">
            <span style="font-family: DingMedium; color: #ff6d24"
              >￥{{ this.ruleForm.transfer_money }}</span
            >
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="lnie-place"></div>
    <div class="trans-item">
      <van-cell-group class="trans-item-cells">
        <van-cell
          title="商户"
          :value="ruleForm.store_name"
          :border="false"
        ></van-cell>
        <div v-if="ruleForm.store_type == '线下'">
          <van-row class="payee-info" type="flex" justify="center">
            <van-col :span="24"> 收款人信息 </van-col>
          </van-row>
          <div class="payee-bg">
            <van-row type="flex" justify="center">
              <van-col :span="24">
                {{ ruleForm.bank_card }}
              </van-col>
            </van-row>
            <van-row type="flex" justify="center">
              <van-col :span="16">
                {{ ruleForm.bank_name }}
              </van-col>
              <van-col :span="8" class="text-rg">
                {{ ruleForm.card_holder }}
              </van-col>
            </van-row>
          </div>
        </div>
      </van-cell-group>
    </div>
    <div class="fix-bottom-btn">
      <van-button
        type="custom-primary"
        size="large"
        block
        @click="toTransComplete"
        >确认转让</van-button
      >
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Field, Col, Row, Button, Toast } from "vant";
import { getMessageBox } from "@/assets/js/utils";
import { confirmTrans } from "@/api/api";
export default {
  name: "beanTransConfirm",
  components: {
    vanCell: Cell,
    vanCellGroup: CellGroup,
    vanField: Field,
    vanCol: Col,
    vanRow: Row,
    vanButton: Button,
  },
  data() {
    return {
      ruleForm: {
        dou_num: this.$route.query.dou_num,
        transfer_money: this.$route.query.transfer_money,
        store_id: this.$route.query.store_id,
        store_name: this.$route.query.store_name,
        bank_card: this.$route.query.bank_card,
        bank_name: this.$route.query.bank_name,
        card_holder: this.$route.query.card_holder,
        bound_phone: this.$route.query.bound_phone,
        store_type: this.$route.query.store_type,
      },
    };
  },
  methods: {
    // 完成确认转账
    toTransComplete() {
      Toast.loading({
        message: "",
        forbidClick: true,
        duration: 0,
      });
      // 			{
      // 				dou_num: this.ruleForm.dou_num,
      // 				store_id: this.ruleForm.store_id,
      // 			}
      let { store_type, ..._parms } = this.ruleForm;
      confirmTrans(
        Object.assign(_parms, {
          dou_trans_type:
            this.ruleForm.store_type == "线下" ? "豆转让(线下)" : "豆转让",
        })
      )
        .then((res) => {
          Toast.clear();
          if (res.code == 200000) {
            this.$router.push({
              path: "/beanTransComplete",
              query: {
                dou_num: this.ruleForm.dou_num,
                transfer_money: this.ruleForm.transfer_money,
                store_id: this.ruleForm.store_id,
                store_name: this.ruleForm.store_name,
              },
            });
          } else {
            getMessageBox(res.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.bean-trans-wrap {
  margin-bottom: 100px;
  width: 375px;
  overflow: hidden;
  min-height: calc(100% - 100px);

  .lnie-place {
    width: 100%;
    height: 10px;
    background: rgba(241, 246, 253, 1);
  }
  .trans-item-cells /deep/ .van-cell__title,
  .trans-item-cells /deep/ .van-van-cell__value {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
  .trans-item-cells {
    /deep/.van-cell__value {
      flex: 2;
    }
    /deep/ .van-van-cell__value {
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
  }
  .payee-info {
    font-size: 16px;
    padding: 10px 16px 0;
  }
  .payee-bg {
    padding: 20px 20px;
    margin: 0 8px;
    color: #ffffff;
    background: url("../../../assets/images/bgpayee.png") no-repeat;
    background-size: 100% 100%;
    .text-rg {
      text-align: right;
    }
    /deep/ .van-row {
      font-size: 16px;
      padding: 10px 16px;
    }
  }
}
</style>
